import React from 'react';
import "./index.css"
// 引入路由插件
import {HashRouter as Router,Route,Redirect} from "react-router-dom"
// 引入路由组件
import Index from '../Index/Index';
import House from '../House/House';
import Collect from '../Collect/Collect';
import My from '../My/My';

// 引入ant插件

import { TabBar } from 'antd-mobile';

// 在外部准备路由数据
let tab=[
    {txt:"首页",path:"/nav",icon:"icon-ind"},
    {txt:"找房",path:"/nav/house",icon:"icon-findHouse"},
    {txt:"收藏",path:"/nav/coll",icon:"icon-coll"},
    {txt:"我的",path:"/nav/my",icon:"icon-my"},
]

class NavBar extends React.Component {
    state={
        selectedTab:"/nav"
    }
    rendertab(){
        return tab.map((v,k)=>{
            return <TabBar.Item
            title={v.txt}
            key={v.txt}
            icon={
                <i className={"iconfont "+v.icon}></i>
            }
            selectedIcon={
                <i className={"iconfont "+v.icon}></i>
            }
            selected={this.state.selectedTab === v.path}
           
            onPress={() => {
              this.setState({
                selectedTab: v.path,
              });
              // 跳路由
              this.props.history.push(v.path)
            }}
           
          >
          
          </TabBar.Item>
        })
    }
    render() { 
        return <div>
           
            {/* <Router> */}

                <Route exact path="/nav" component={Index} />
                <Route path="/nav/house" component={House} />
                <Route path="/nav/coll" component={Collect} />
                <Route path="/nav/my" component={My} />

                {/* <Redirect from="/nav" to="/nav/index" /> */}
            {/* </Router> */}

            {/* 底部导航 */}
            <p style={{height:"50px",margin:0,padding:0}}></p>
            <TabBar
                unselectedTintColor="#949494"
                tintColor="#33A3F4"
                barTintColor="white"
                hidden={false}
               
            >
              {this.rendertab()}
          
           </TabBar>
        </div>;
    }
    componentDidMount(){
        // console.log(this.props.location.pathname);// 当前的路由路径
        this.setState({
            selectedTab:this.props.location.pathname,
          });

    }
    componentDidUpdate(p){// 组件发生改变
        // console.log(p);// 记录上一次的路由信息
        // console.log(this.props);// 当前路由信息
        // 判断当前路由与上一次路由不相等的情况下 避免递归
        if(p.location.pathname!=this.props.location.pathname){
            this.setState({
                selectedTab:this.props.location.pathname,
              });
        }
    }
}
 
export default NavBar;